<template>
    <div class="main">
      <Nav />
      <div class="right_route">
        <div class="bottom_content">
          <div class="table">
              <Table />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, ref, reactive } from 'vue'
  import Nav from "@/components/public/nav.vue"
  import Table from "@/components/maintenance/tableList.vue"
  </script>
  
  <style lang="scss" scoped>
  .main {
      display: flex;
      background: rgba(24, 145, 255, 1);
  
      .right_route {
          padding: 10px 20px 0 20px;
          flex: 1;
          box-sizing: border-box;
          background: rgba(#FFF, 1);
          width: calc(100vw - 200px);
          position: relative;
  
          .bottom_content {
              margin-bottom: 20px;
          }
  
          .date {
              display: flex;
              margin: 20px 0;
  
              span {
                  display: inline-block;
                  flex: 1;
                  text-align: center;
                  @include font(#333, 17, 60);
                  cursor: pointer;
              }
  
              .active {
                  background: rgba(64, 158, 255, 1);
                  color: #FFF;
              }
          }
  
          .scrollbar {
              width: calc(100vw - 250px);
          }
  
          .search_input {
              // display: flex;
              // flex-wrap: wrap;
  
              // padding-right: 192px;
              .item_first {
  
                  .item {
                      display: flex;
                      align-items: center;
                      margin-top: 20px;
  
                      span {
                          display: inline-block;
                          width: 70px;
                          @include font(rgba(0, 0, 0, 0.8470588235294118), 14, 22);
                      }
  
                      >div {
                          flex: 1;
                      }
                  }
              }
  
              .submit_button {
                  display: flex;
                  align-items: center;
                  margin-top: 20px;
                  // margin-left: 223px;
                  justify-content: right;
              }
          }
  
          .table {
              margin-top: 40px;
          }
  
          .pagination {
              margin: 20px 0;
              display: flex;
              justify-content: right;
          }
      }
  }
  
  .scrollbar-flex-content {
      display: flex;
  }
  
  .scrollbar-demo-item {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 126px;
      height: 50px;
      text-align: center;
      border-radius: 4px;
      // background: var(--el-color-danger-light-9);
      @include font(#333, 13, 50);
      cursor: pointer;
  
      .num {
          margin-left: 5px;
      }
  
      &.active_nav {
          color: rgb(64, 158, 255);
      }
  }
  
  :deep(.el-select) {
      width: 100%;
  }
  
  :deep(.picker_item) {
      width: 100%;
  }
  :deep(.el-cascader) {
    width: 100%;
  }
  :deep(.el-input--large){
    height: 32px;
  }
  :deep(.el-button){
    height: 32px;
  }
  </style>